import {} from 'antd';
import React, { Suspense } from 'react';

// React.lazy  + Suspense
// ssr

// Suspense 是一个组件 有一个fallback的属性 loading的时候渲染
// children是异步组件 多个异步组件可以使用 Suspense 嵌套使用
const SuspenseDemo = () => {
  return <div>Suspense</div>;
};

// const getUserInfo = () => {};
// // 子组件
// function UserInfo() {
//   const user = getUserInfo();
//   return <h1>{user.name}</h1>;
// }

// React.lazy 接受一个函数 这个函数需要动态调用 import()
// 它必须返回一个 Promise  该 Promise 需要 resolve 一个 default export 的 React 组件
// 代码分隔

// Error Boundaries

// 模拟异步组件的功能

function AsyncComponent(Component: any, api: any) {
  const AsyncComponentPromise = () =>
    new Promise(async (resolve) => {
      const data = await api();
      resolve({
        default: (props: any) => <Component data={data} {...props} />,
      });
    });
  // 等到promise完成 数据请求
  // @ts-ignore
  return React.lazy(AsyncComponentPromise);
}

const getData = () => {
  return new Promise((resolve) => {
    //模拟异步
    setTimeout(() => {
      resolve({
        name: 'alien',
        say: 'let us learn React!',
      });
    }, 1000);
  });
};

function Test({ data, age }: any) {
  const { name, say } = data;
  console.log('组件渲染');
  return (
    <div>
      <div> hello , my name is {name} </div>
      <div>age : {age} </div>
      <div> i want to say {say} </div>
    </div>
  );
}

const LazyTest = AsyncComponent(Test, getData);

export default function RenderOptDemo() {
  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <LazyTest age={18} />
      </Suspense>
    </>
  );
}

// https://ahooks.js.org/zh-CN/hooks/use-request/index

// react 基础 进阶 源码 生态
// antd 组件库
// 脚手架
// bff nest
// next ssr
// 日志系统
// 监控  报警
// 多端

// useQuest()
// const AsyncComponent = () => {
//   const [data, isLoading, error] = fetchData('./api')
//   if (isLoading) {
//     return <Loading />
//   }
//   if (error) {
//     return <Error error={error} />
//   }

//   return <DisplayData
//       data={data}
//   />
// }
